/*
 * @Author: Await
 * @Date: 2025-05-06 16:25:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 16:49:48
 * @Description: 3D光照配置组件
 */
import React from 'react';
import {
    Form,
    Switch,
    InputNumber,
    Row,
    Col,
    Typography,
    Tooltip,
    Divider,
    ColorPicker,
    Radio,
    Slider,
    Select
} from 'antd';
import { InfoCircleOutlined, BulbOutlined, PlusOutlined } from '@ant-design/icons';
import type { LightConfig } from '../../types/chartTypes';

const { Option } = Select;

interface LightConfigProps {
    config?: LightConfig;
    onChange: (config: LightConfig) => void;
}

/**
 * 3D光照配置组件
 * 
 * 控制3D图表的光照参数
 */
const LightConfigComponent: React.FC<LightConfigProps> = ({ config = {}, onChange }) => {
    // 确保有默认值
    const lightConfig: LightConfig = {
        main: {
            intensity: 1,
            shadow: false,
            shadowQuality: 'medium',
            ...config.main
        },
        ambient: {
            intensity: 0.2,
            ...config.ambient
        },
        ambientCubemap: {
            texture: null,
            exposure: 1,
            diffuseIntensity: 0.5,
            specularIntensity: 0.5,
            ...config.ambientCubemap
        },
        spotLights: config.spotLights || [],
        ...config
    };

    // 表单项标题组件
    const FormItemLabel = ({ children, tooltip }: { children: React.ReactNode, tooltip?: string }) => (
        <div style={{ marginBottom: 4, display: 'flex', alignItems: 'center' }}>
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                {children}
            </Typography.Text>
            {tooltip && (
                <Tooltip title={tooltip}>
                    <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12, color: '#999' }} />
                </Tooltip>
            )}
        </div>
    );

    // 处理配置变更
    const handleMainLightChange = (key: string, value: any) => {
        onChange({
            ...lightConfig,
            main: {
                ...lightConfig.main,
                [key]: value
            }
        });
    };

    const handleAmbientLightChange = (key: string, value: any) => {
        onChange({
            ...lightConfig,
            ambient: {
                ...lightConfig.ambient,
                [key]: value
            }
        });
    };

    const handleAmbientCubemapChange = (key: string, value: any) => {
        onChange({
            ...lightConfig,
            ambientCubemap: {
                ...lightConfig.ambientCubemap,
                [key]: value
            }
        });
    };

    const handleSpotLightChange = (index: number, key: string, value: any) => {
        const spotLights = [...(lightConfig.spotLights || [])];
        if (!spotLights[index]) {
            spotLights[index] = {
                intensity: 1,
                alpha: 40,
                beta: 40,
            };
        }
        spotLights[index] = {
            ...spotLights[index],
            [key]: value
        };

        onChange({
            ...lightConfig,
            spotLights
        });
    };

    const addSpotLight = () => {
        const spotLights = [...(lightConfig.spotLights || []), {
            intensity: 1,
            alpha: 40,
            beta: 40,
            color: '#ffffff'
        }];

        onChange({
            ...lightConfig,
            spotLights
        });
    };

    const removeSpotLight = (index: number) => {
        const spotLights = [...(lightConfig.spotLights || [])];
        spotLights.splice(index, 1);

        onChange({
            ...lightConfig,
            spotLights
        });
    };

    // 预设环境贴图选项
    const presetCubemaps = [
        { value: 'default', label: '默认' },
        { value: 'pisa', label: '比萨' },
        { value: 'church', label: '教堂' },
        { value: 'factory', label: '工厂' },
        { value: 'apartment', label: '公寓' },
        { value: 'office', label: '办公室' }
    ];

    return (
        <div style={{ padding: 12, background: '#fff', borderRadius: 4 }}>
            {/* 光照效果预览区域 */}
            <div
                style={{
                    marginBottom: 16,
                    padding: 16,
                    border: '1px dashed #d9d9d9',
                    borderRadius: 4,
                    backgroundColor: '#fafafa',
                    position: 'relative',
                    height: 120,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    overflow: 'hidden'
                }}
            >
                {/* 球体 */}
                <div style={{
                    width: 70,
                    height: 70,
                    borderRadius: '50%',
                    background: `linear-gradient(${120 + (lightConfig.main?.alpha || 0)}deg, 
                    rgba(255,255,255,${lightConfig.main?.intensity || 1}), 
                    rgba(100,100,100,${0.8 - (lightConfig.ambient?.intensity || 0.2)}))`,
                    boxShadow: lightConfig.main?.shadow
                        ? `5px 5px 10px rgba(0,0,0,0.3)`
                        : 'none',
                    position: 'relative'
                }} />

                {/* 平面 */}
                <div style={{
                    position: 'absolute',
                    width: '100%',
                    height: 1,
                    bottom: 30,
                    background: `linear-gradient(90deg, 
                    transparent, 
                    rgba(200,200,200,${lightConfig.ambient?.intensity || 0.2}), 
                    transparent)`,
                    boxShadow: lightConfig.main?.shadow
                        ? `0 0 10px rgba(0,0,0,0.2)`
                        : 'none'
                }} />

                {/* 光源指示 */}
                <div style={{
                    position: 'absolute',
                    top: 20,
                    right: 30,
                    color: `rgba(255, 204, 0, ${lightConfig.main?.intensity || 1})`,
                    fontSize: 24
                }}>
                    <BulbOutlined />
                </div>

                {/* 点光源指示 */}
                {lightConfig.spotLights?.map((light, index) => (
                    <div key={index} style={{
                        position: 'absolute',
                        top: 20 + index * 20,
                        left: 30,
                        color: light.color || `rgba(255, 120, 0, ${light.intensity || 1})`,
                        fontSize: 16
                    }}>
                        <BulbOutlined />
                    </div>
                ))}

                <Typography.Text
                    style={{
                        position: 'absolute',
                        bottom: 8,
                        right: 8,
                        fontSize: 12,
                        color: '#999'
                    }}
                >
                    <BulbOutlined style={{ marginRight: 4 }} />
                    光照预览
                </Typography.Text>
            </div>

            <Typography.Title level={5} style={{ margin: 0, marginBottom: 16 }}>
                3D光照配置
                <Tooltip title="控制3D图表的光照效果">
                    <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 8 }} />
                </Tooltip>
            </Typography.Title>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>主光源</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="主光源强度 (0-5)">
                        光源强度
                    </FormItemLabel>
                    <InputNumber
                        value={lightConfig.main?.intensity || 1}
                        onChange={value => handleMainLightChange('intensity', value)}
                        min={0}
                        max={5}
                        step={0.1}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={lightConfig.main?.intensity || 1}
                        onChange={value => handleMainLightChange('intensity', value)}
                        min={0}
                        max={5}
                        step={0.1}
                    />
                </Col>

                <Col span={12}>
                    <FormItemLabel tooltip="光源颜色">
                        光源颜色
                    </FormItemLabel>
                    <ColorPicker
                        value={lightConfig.main?.color || '#ffffff'}
                        onChange={color => {
                            const colorValue = typeof color === 'string'
                                ? color
                                : color.toHexString();
                            handleMainLightChange('color', colorValue);
                        }}
                        showText
                    />
                </Col>

                <Col span={12}>
                    <FormItemLabel tooltip="主光源Alpha角度 (0-360)">
                        Alpha角度
                    </FormItemLabel>
                    <InputNumber
                        value={lightConfig.main?.alpha || 40}
                        onChange={value => handleMainLightChange('alpha', value)}
                        min={0}
                        max={360}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={lightConfig.main?.alpha || 40}
                        onChange={value => handleMainLightChange('alpha', value)}
                        min={0}
                        max={360}
                        step={5}
                    />
                </Col>

                <Col span={12}>
                    <FormItemLabel tooltip="主光源Beta角度 (0-360)">
                        Beta角度
                    </FormItemLabel>
                    <InputNumber
                        value={lightConfig.main?.beta || 40}
                        onChange={value => handleMainLightChange('beta', value)}
                        min={0}
                        max={360}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={lightConfig.main?.beta || 40}
                        onChange={value => handleMainLightChange('beta', value)}
                        min={0}
                        max={360}
                        step={5}
                    />
                </Col>

                <Col span={12}>
                    <FormItemLabel tooltip="启用阴影">
                        启用阴影
                    </FormItemLabel>
                    <Switch
                        checked={lightConfig.main?.shadow}
                        onChange={value => handleMainLightChange('shadow', value)}
                        size="small"
                    />
                </Col>

                {lightConfig.main?.shadow && (
                    <Col span={12}>
                        <FormItemLabel tooltip="阴影质量">
                            阴影质量
                        </FormItemLabel>
                        <Radio.Group
                            value={lightConfig.main?.shadowQuality || 'medium'}
                            onChange={e => handleMainLightChange('shadowQuality', e.target.value)}
                            size="small"
                        >
                            <Radio.Button value="low">低</Radio.Button>
                            <Radio.Button value="medium">中</Radio.Button>
                            <Radio.Button value="high">高</Radio.Button>
                            <Radio.Button value="ultra">超高</Radio.Button>
                        </Radio.Group>
                    </Col>
                )}
            </Row>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>环境光</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="环境光强度 (0-1)">
                        环境光强度
                    </FormItemLabel>
                    <InputNumber
                        value={lightConfig.ambient?.intensity || 0.2}
                        onChange={value => handleAmbientLightChange('intensity', value)}
                        min={0}
                        max={1}
                        step={0.05}
                        style={{ width: '100%' }}
                        size="small"
                    />
                    <Slider
                        value={lightConfig.ambient?.intensity || 0.2}
                        onChange={value => handleAmbientLightChange('intensity', value)}
                        min={0}
                        max={1}
                        step={0.05}
                    />
                </Col>

                <Col span={12}>
                    <FormItemLabel tooltip="环境光颜色">
                        环境光颜色
                    </FormItemLabel>
                    <ColorPicker
                        value={lightConfig.ambient?.color || '#ffffff'}
                        onChange={color => {
                            const colorValue = typeof color === 'string'
                                ? color
                                : color.toHexString();
                            handleAmbientLightChange('color', colorValue);
                        }}
                        showText
                    />
                </Col>
            </Row>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>聚光灯</Divider>

            {(lightConfig.spotLights || []).map((spotlight, index) => (
                <div key={index} style={{ marginBottom: 16, padding: 12, border: '1px solid #f0f0f0', borderRadius: 4, position: 'relative' }}>
                    <div style={{ position: 'absolute', top: 8, right: 8 }}>
                        <Typography.Link
                            onClick={() => removeSpotLight(index)}
                            style={{ color: 'rgba(255, 0, 0, 0.6)' }}
                        >
                            删除
                        </Typography.Link>
                    </div>
                    <Typography.Text strong>聚光灯 #{index + 1}</Typography.Text>
                    <Row gutter={[16, 16]} style={{ marginTop: 12 }}>
                        <Col span={12}>
                            <FormItemLabel tooltip="聚光灯强度 (0-5)">
                                强度
                            </FormItemLabel>
                            <InputNumber
                                value={spotlight.intensity || 1}
                                onChange={value => handleSpotLightChange(index, 'intensity', value)}
                                min={0}
                                max={5}
                                step={0.1}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={spotlight.intensity || 1}
                                onChange={value => handleSpotLightChange(index, 'intensity', value)}
                                min={0}
                                max={5}
                                step={0.1}
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="聚光灯颜色">
                                颜色
                            </FormItemLabel>
                            <ColorPicker
                                value={spotlight.color || '#ffffff'}
                                onChange={color => {
                                    const colorValue = typeof color === 'string'
                                        ? color
                                        : color.toHexString();
                                    handleSpotLightChange(index, 'color', colorValue);
                                }}
                                showText
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="聚光灯Alpha角度 (0-360)">
                                Alpha角度
                            </FormItemLabel>
                            <InputNumber
                                value={spotlight.alpha || 40}
                                onChange={value => handleSpotLightChange(index, 'alpha', value)}
                                min={0}
                                max={360}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={spotlight.alpha || 40}
                                onChange={value => handleSpotLightChange(index, 'alpha', value)}
                                min={0}
                                max={360}
                                step={5}
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="聚光灯Beta角度 (0-360)">
                                Beta角度
                            </FormItemLabel>
                            <InputNumber
                                value={spotlight.beta || 40}
                                onChange={value => handleSpotLightChange(index, 'beta', value)}
                                min={0}
                                max={360}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={spotlight.beta || 40}
                                onChange={value => handleSpotLightChange(index, 'beta', value)}
                                min={0}
                                max={360}
                                step={5}
                            />
                        </Col>
                    </Row>
                </div>
            ))}

            <div style={{ marginBottom: 16 }}>
                <Typography.Link onClick={addSpotLight}>
                    <PlusOutlined /> 添加聚光灯
                </Typography.Link>
            </div>

            <Divider orientation="left" style={{ margin: '12px 0', fontSize: 12 }}>环境贴图</Divider>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <FormItemLabel tooltip="启用环境贴图">
                        启用环境贴图
                    </FormItemLabel>
                    <Switch
                        checked={!!lightConfig.ambientCubemap?.texture}
                        onChange={value => handleAmbientCubemapChange('texture', value ? 'default' : null)}
                        size="small"
                    />
                </Col>

                {lightConfig.ambientCubemap?.texture && (
                    <>
                        <Col span={12}>
                            <FormItemLabel tooltip="环境贴图类型">
                                贴图类型
                            </FormItemLabel>
                            <Select
                                value={lightConfig.ambientCubemap?.texture}
                                onChange={value => handleAmbientCubemapChange('texture', value)}
                                style={{ width: '100%' }}
                                size="small"
                            >
                                {presetCubemaps.map(option => (
                                    <Option key={option.value} value={option.value}>{option.label}</Option>
                                ))}
                            </Select>
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="环境贴图曝光 (0-2)">
                                曝光度
                            </FormItemLabel>
                            <InputNumber
                                value={lightConfig.ambientCubemap?.exposure || 1}
                                onChange={value => handleAmbientCubemapChange('exposure', value)}
                                min={0}
                                max={2}
                                step={0.1}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={lightConfig.ambientCubemap?.exposure || 1}
                                onChange={value => handleAmbientCubemapChange('exposure', value)}
                                min={0}
                                max={2}
                                step={0.1}
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="漫反射强度 (0-1)">
                                漫反射强度
                            </FormItemLabel>
                            <InputNumber
                                value={lightConfig.ambientCubemap?.diffuseIntensity || 0.5}
                                onChange={value => handleAmbientCubemapChange('diffuseIntensity', value)}
                                min={0}
                                max={1}
                                step={0.05}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={lightConfig.ambientCubemap?.diffuseIntensity || 0.5}
                                onChange={value => handleAmbientCubemapChange('diffuseIntensity', value)}
                                min={0}
                                max={1}
                                step={0.05}
                            />
                        </Col>
                        <Col span={12}>
                            <FormItemLabel tooltip="镜面反射强度 (0-1)">
                                镜面反射强度
                            </FormItemLabel>
                            <InputNumber
                                value={lightConfig.ambientCubemap?.specularIntensity || 0.5}
                                onChange={value => handleAmbientCubemapChange('specularIntensity', value)}
                                min={0}
                                max={1}
                                step={0.05}
                                style={{ width: '100%' }}
                                size="small"
                            />
                            <Slider
                                value={lightConfig.ambientCubemap?.specularIntensity || 0.5}
                                onChange={value => handleAmbientCubemapChange('specularIntensity', value)}
                                min={0}
                                max={1}
                                step={0.05}
                            />
                        </Col>
                    </>
                )}
            </Row>
        </div>
    );
};

export default LightConfigComponent; 